<template>
	<div class="sys-region-container">
		<el-dialog v-model="state.isShowDialog" draggable :close-on-click-modal="false" width="700px">
			<template #header>
				<div style="color: #fff">
					<el-icon size="16" style="margin-right: 3px; display: inline; vertical-align: middle"> <ele-Edit /> </el-icon>
					<span> {{ props.title }} </span>
				</div>
			</template>
			<el-form :model="state.ruleForm" ref="ruleFormRef" label-width="auto">
				<el-row :gutter="35">
					 <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
						<el-form-item label="上级名称">
							<el-cascader
								:options="regionData"
								:props="{ checkStrictly: true, emitPath: false, value: 'id', label: 'name' }"
								placeholder="请选择上级名称"
								clearable
								class="w100"
								v-model="state.ruleForm.Pid"
							>
								<template #default="{ node, data }">
									<span>{{ data.name }}</span>
									<span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
								</template>
							</el-cascader>
						</el-form-item>
					</el-col>

					<el-col :span="24" class="mb20">
						<el-radio-group v-model="state.selectedOption">
							<el-radio value="管理处">管理处</el-radio>
							<el-radio value="路段">路段</el-radio>
						</el-radio-group>
					</el-col>

					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" v-if="state.selectedOption === '管理处'" class="mb20">
						<el-form-item label="管理处名称" prop="name" :rules="[{ required: true, message: '管理处名称不能为空', trigger: 'blur' }]">
							<el-input v-model="state.ruleForm.name" placeholder="管理处名称" clearable />
						</el-form-item>
					</el-col>

					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24"  class="mb20" v-if="state.selectedOption === '路段'">
						<el-form-item label="路线全称" prop="roadname" :rules="[{ required: true, message: '路线全称不能为空', trigger: 'blur' }]">
							<el-input v-model="state.ruleForm.roadname" placeholder="路线全称" clearable />
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20"v-if="state.selectedOption === '路段'">
						<el-form-item label="路段名称" prop="sectionname" :rules="[{ required: true, message: '路段名称不能为空', trigger: 'blur' }]">
							<el-input v-model="state.ruleForm.sectionname" placeholder="路段名称" clearable />
						</el-form-item>
					</el-col>

					<el-col :span="8" v-if="state.selectedOption === '路段'" class="mb20">
						<el-form-item label="路线编号" prop="roadNo">
							<el-input v-model="state.ruleForm.roadNo" placeholder="路线编号" clearable />
						</el-form-item>
					</el-col>

				</el-row>
			</el-form>

			<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" v-if="state.selectedOption === '管理处'" class="mb20">
				<el-form-item label="检测数据上传" prop="name" :rules="[{ required: true, message: '管理处名称不能为空', trigger: 'blur' }]">
				</el-form-item>
			</el-col>
			<!-- 上传基础数据EXCL-->

			<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
				<el-form-item label="" prop="lmjzinfo">
					<template #default="scope">
						<el-button icon="ele-Edit" size="small" text type="primary"    @click="openUploadDialog(1)" > 上传路面结构数据 </el-button>

						<el-image
								v-if="state.lmjzinfosrc"
								style="width: 60px; height: 60px"
								:src="state.lmjzinfosrc"
								alt="无法预览"
								:lazy="true"
								:hide-on-click-modal="true"
								:preview-src-list="[state.lmjzinfosrc]"
								:initial-index="0"
								fit="scale-down"
								preview-teleported
						>
							<template #error> </template>
						</el-image>
					</template>
				</el-form-item>

			</el-col>
			<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
				<el-form-item label="" prop="qpimge">
					<template #default="scope">
						<el-button icon="ele-Edit" size="small" text type="primary"    @click="openUploadDialog(2)" > 上传水平切片 </el-button>
						<el-image
								v-if="state.qpimgesrc"
								style="width: 60px; height: 60px"
								:src="state.qpimgesrc"
								alt="无法预览"
								:lazy="true"
								:hide-on-click-modal="true"
								:preview-src-list="[state.qpimgesrc]"
								:initial-index="0"
								fit="scale-down"
								preview-teleported
						>
							<template #error> </template>
						</el-image>
					</template>
				</el-form-item>

			</el-col>
			<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
				<el-form-item label="" prop="xcimage">
					<template #default="scope">
						<el-button icon="ele-Edit" size="small" text type="primary"   @click="openUploadDialog(3)" > 上传隐患点现场图片 </el-button>
						<el-image
								v-if="state.xcimagesrc"
								style="width: 60px; height: 60px"
								:src="state.xcimagesrc"
								alt="无法预览"
								:lazy="true"
								:hide-on-click-modal="true"
								:preview-src-list="[state.xcimagesrc]"
								:initial-index="0"
								fit="scale-down"
								preview-teleported
						>
							<template #error> </template>
						</el-image>
					</template>
				</el-form-item>

			</el-col>
			<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
				<el-form-item label="" prop="yjimage">
					<template #default="scope">
						<el-button icon="ele-Edit" size="small" text type="primary"   @click="openUploadDialog(4)" > 上传远景图片 </el-button>
						<el-image
								v-if="state.yjimagesrc"
								style="width: 60px; height: 60px"
								:src="state.yjimagesrc"
								alt="无法预览"
								:lazy="true"
								:hide-on-click-modal="true"
								:preview-src-list="[state.yjimagesrc]"
								:initial-index="0"
								fit="scale-down"
								preview-teleported
						>
							<template #error> </template>
						</el-image>
					</template>
				</el-form-item>

			</el-col>
			<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
				<el-form-item label="" prop="nkimage">
					<template #default="scope">
						<el-button icon="ele-Edit" size="small" text type="primary"   @click="openUploadDialog(5)" > 上传内窥图片 </el-button>
						<el-image
								v-if="state.nkimagesrc"
								style="width: 60px; height: 60px"
								:src="state.nkimagesrc"
								alt="无法预览"
								:lazy="true"
								:hide-on-click-modal="true"
								:preview-src-list="[state.nkimagesrc]"
								:initial-index="0"
								fit="scale-down"
								preview-teleported
						>
							<template #error> </template>
						</el-image>
					</template>
				</el-form-item>

			</el-col>
			<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
				<el-form-item label="" prop="dtimage">
					<template #default="scope">
						<el-button icon="ele-Edit" size="small" text type="primary"   @click="openUploadDialog(6)" > 上传地图位置 </el-button>
						<el-image
								v-if="state.dtimagesrc"
								style="width: 60px; height: 60px"
								:src="state.dtimagesrc"
								alt="无法预览"
								:lazy="true"
								:hide-on-click-modal="true"
								:preview-src-list="[state.dtimagesrc]"
								:initial-index="0"
								fit="scale-down"
								preview-teleported
						>
							<template #error> </template>
						</el-image>
					</template>
				</el-form-item>

			</el-col>

			<!--	<MapDragRoute ref="mapDragRoute" :title="地图组件" @handleQuery="handleQuery"  :regionData="state.regionData"/>-->

			<template #footer>
				<span class="dialog-footer">
					<el-button @click="cancel">取 消</el-button>
					<el-button type="primary" @click="submit">确 定</el-button>
				</span>
			</template>
		</el-dialog>

	</div>
</template>

<script lang="ts" setup name="sysEditRegion">
import { reactive, ref } from 'vue';
import {ElMessage, UploadInstance} from 'element-plus';
import { getAPI } from '/@/utils/axios-utils';
import {SysFileApi, SysRegionApi} from '/@/api-services/api';
import {SysFile, UpdateRegionInput} from '/@/api-services/models';
import MapDragRoute from '/@/views/map/MapDragRoute.vue';
import {uploadFilesPoject} from "/@/api/region/region";
import {addRoaddisinfo, detailRoaddisinfo, updateRoaddisinfo} from "/@/api/main/roaddisinfo";

const editRegionRef = ref<InstanceType<typeof MapDragRoute>>();

const props = defineProps({
	title: String,
	regionData: {
		type: Array,
		required: true,
	},
	year: {
		type: String,
		required: true
	},
	pid: {
		type: String,
		required: true
	},
});
const emits = defineEmits(['handleQuery']);
const ruleFormRef = ref();
const ruleForm = ref<any>({});
const uploadRef = ref<UploadInstance>();
const state = reactive({
	fileData: [] as Array<SysFile>,
	selectedOption:"",
	fileList: [] as any,
	fileName: '',
	key:0,
	Pid : undefined,
	year : undefined,
	isShowDialog: false,
	dialogUploadVisible: false,
	ruleForm: {} as UpdateRegionInput,
	regionData:[],
	lmjzinfo:'',
	lmjzinfosrc:"",
});


// 打开上传页面
const openUploadDialog = (key: any)=> {
	state.fileList = [];
	console.log('上传类型',key)
	state.Pid=props.pid;
	state.key=key;
	state.year=props.year;
	state.dialogUploadVisible = true;
};

// 通过onChanne方法获得文件列表
const handleChange = (file: any, fileList: []) => {
	state.fileList = fileList;
};



// 上传
const uploadFile = async () => {
	const params = new FormData();

	if (state.fileList.length >=1){
		for (let i = 0; i < state.fileList.length; i++) {
			state.fileList[i].pid = state.Pid;
			params.append('files', state.fileList[i].raw);
		}
		params.append('pid',state.Pid);
		params.append('key',state.key);
		const fileInfoResponse	= await uploadFilesPoject(params);
		console.log('Saving with pid:', fileInfoResponse);
		console.log('img id', fileInfoResponse.data.result[0].id);
		console.log('img url', fileInfoResponse.data.result[0].url);

		handleFileInfoResponse(fileInfoResponse);
	}
	state.key=0;
	state.Pid=0;
	state.dialogUploadVisible = false;
};



const handleFileInfoResponse = (fileInfoResponse) => {
	// 根据 key 值进行判断和赋值
	console.log('key', state.key);

	switch (state.key) {
		case 1:
			state.lmjzinfo = fileInfoResponse.data.result[0].id;
			state.lmjzinfosrc = fileInfoResponse.data.result[0].url;
			console.log('img leidaimagesrc', state.lmjzinfosrc );

			break;

		default:
			break;
	}
};


// 打开弹窗
const openDialog = async (row: any) => {
	console.log('Saving with pid:', props.pid);
	// ruleForm.value = JSON.parse(JSON.stringify(row));
	// 改用detail获取最新数据来编辑
	state.ruleForm = JSON.parse(JSON.stringify(row));
	state.isShowDialog = true;
	ruleFormRef.value?.resetFields();


	//	state.leidaimage = ruleForm.value.leidaimage;
	//	state.leidaimagesrc = ruleForm.value.leidaimagesrc;

};

// 关闭弹窗
const closeDialog = () => {
	emits('handleQuery');
	state.isShowDialog = false;

};

// 取消
const cancel = () => {
	state.fileList = [];
	state.isShowDialog = false;
};

// 提交
const submit = () => {

	ruleFormRef.value.validate(async (isValid: boolean, fields?: any) => {
		if (isValid) {
			let values = ruleForm.value;
			values.pid = props.pid;
			values.year = props.year;

			values.leidaimage = state.lmjzinfo;

			values.leidaimagesrc = state.lmjzinfosrc;

			if (ruleForm.value.id == undefined || ruleForm.value.id == null || ruleForm.value.id == "" || ruleForm.value.id == 0) {
				await getAPI(SysRegionApi).apiSysRegionAddPost(values);
			} else {
				await getAPI(SysRegionApi).apiSysRegionUpdatePost(values);
			}
			closeDialog();
		} else {
			ElMessage({
				message: `表单有${Object.keys(fields).length}处验证失败，请修改后再提交`,
				type: "error",
			});
		}
	});




};

// 导出对象
defineExpose({ openDialog });
</script>
